<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于边缘计算的智行车载操控矩阵</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .sidebar {
            width: 100%;
            background-color: #f4f4f4;
            padding: 10px;
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
            display: flex;
            justify-content: space-around;
        }

        .sidebar ul li {
            padding: 10px;
            cursor: pointer;
            border-bottom: 1px solid #ccc;
        }

        .sidebar ul li:hover {
            background-color: #ddd;
        }

        .content {
            flex: 1;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .content-intro {
            text-align: center;
            margin-bottom: 20px;
        }

        .module-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-around;
        }

        .module {
            flex-basis: calc(33.33% - 20px);
            border: 1px solid #ccc;
            padding: 20px;
            min-height: 150px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #2196F3;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <ul>
            <li id="home">首页</li>
            <li id="stm32">STM32数据</li>
            <li id="modbus">MODBUS数据</li>
        </ul>
    </div>
    <div class="content" id="contentArea">
        <div class="content-intro">
            <h1>欢迎来到首页</h1>
            <p>这是基于边缘计算的智行车载操控矩阵的首页。</p>
        </div>
        <div class="module-container">
            <!-- 新增的模块 -->
            <div class="module">
                <h2>车内温度</h2>
                <p>当前车内温度：25°C</p>
            </div>
            <div class="module">
                <h2>车内湿度</h2>
                <p>当前车内湿度：50%</p>
            </div>
            <div class="module">
                <h2>空调控制</h2>
                <p>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round"></span>
                    </label>
                    空调状态：开启<br>
                    当前空调温度：22°C
                </p>
            </div>
            <div class="module">
                <h2>车外温度</h2>
                <p>当前车外温度：28°C</p>
            </div>
            <div class="module">
                <h2>车外湿度</h2>
                <p>当前车外湿度：40%</p>
            </div>
            <div class="module">
                <h2>光照强度</h2>
                <p>光照强度：800 lux</p>
            </div>
            <div class="module">
                <h2>电池电压</h2>
                <p>电池电压：12.5V</p>
            </div>
            <div class="module">
                <h2>水箱水量</h2>
                <p>水箱水量：50%</p>
            </div>
            <div class="module">
                <h2>发动机温度</h2>
                <p>发动机温度：90°C</p>
            </div>
            <div class="module">
                <h2>遮光板开关</h2>
                <p>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round"></span>
                    </label>
                    遮光板状态：开启
                </p>
            </div>
            <div class="module">
                <h2>警报开关</h2>
                <p>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round"></span>
                    </label>
                    警报状态：关闭
                </p>
            </div>
            <div class="module">
                <h2>加湿器开关</h2>
                <p>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round"></span>
                    </label>
                    加湿器状态：关闭
                </p>
            </div>
        </div>
    </div>

    <script>
        function getData() {
            var xhr = new XMLHttpRequest();//创建对象
            var url = "";
            //配置
            xhr.open("post", url, true); //post请求方法,
            //true:异步请求
            xhr.send("getData");
            xhr.onreadystatechange = function () //状态发生改变
            {
                //=:赋值
                //==:比较,但是不区分数据类型
                //===:比较,并区分数据类型
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var z = xhr.responseText;//响应正文
                    console.log(z);//
                    //1,2 3 4
                    var x = z.split(",");//
                    var response = {
                        insideTemperature: x[0],
                        insideHumidity: x[1],
                        batteryVoltage: x[2],
                        sunshadeStatus: x[3] == 0 ? '关闭' : '开启',
                        humidifierStatus: x[4] == 0 ? '关闭' : '开启',
                        acTemperature: x[5],
                        alarmStatus: x[6] == 0 ? '关闭' : '开启',
                        outsideTemperature: x[7],
                        outsideHumidity: x[8],
                        lightIntensity: x[9],
                        engineTemperature: x[10],
                        waterTankLevel: x[11],
                        acStatus: x[12] == 0 ? '关闭' : '开启'
                    };
                    updateData(response);
                }
            }

        }
        setInterval(getData, 5000);
        function createModule(title, content) {
            var module = document.createElement('div');
            module.classList.add('module');
            var h2 = document.createElement('h2');
            h2.textContent = title;
            var p = document.createElement('p');
            p.textContent = content;
            module.appendChild(h2);
            module.appendChild(p);
            return module;
        }

        function createSwitchModule(title, status) {
            var module = document.createElement('div');
            module.classList.add('module');
            var h2 = document.createElement('h2');
            h2.textContent = title;
            var p = document.createElement('p');
            var label = document.createElement('label');
            label.classList.add('switch');
            var input = document.createElement('input');
            input.type = 'checkbox';
            if (status === '开启') {
                input.checked = true;
            }
            var span = document.createElement('span');
            span.classList.add('slider', 'round');
            label.appendChild(input);
            label.appendChild(span);
            var statusText = document.createElement('span');
            statusText.textContent = title + '状态：' + status;
            p.appendChild(label);
            p.appendChild(statusText);
            module.appendChild(h2);
            module.appendChild(p);
            return module;
        }

        function updateData(response) {
            var container = document.querySelector('.module-container');
            container.innerHTML = ''; // 清空容器
            var fragment = document.createDocumentFragment();
            var modules = [];
            modules.push(createModule('车内温度', `当前车内温度：${response.insideTemperature}°C`));
            modules.push(createModule('车内湿度', `当前车内湿度：${response.insideHumidity}`));
            var acControl = createSwitchModule('空调控制', response.acStatus);
            var acTemp = document.createElement('p');
            acTemp.textContent = `当前空调温度：${response.acTemperature}°C`;
            acControl.querySelector('.module p').appendChild(acTemp);
            modules.push(acControl);
            modules.push(createModule('车外温度', `当前车外温度：${response.outsideTemperature}°C`));
            modules.push(createModule('车外湿度', `当前车外湿度：${response.outsideHumidity}`));
            modules.push(createModule('光照强度', `光照强度：${response.lightIntensity} lux`));
            modules.push(createModule('电池电压', `电池电压：${response.batteryVoltage}V`));
            modules.push(createModule('水箱水量', `水箱水量：${response.waterTankLevel}`));
            modules.push(createModule('发动机温度', `发动机温度：${response.engineTemperature}°C`));
            modules.push(createSwitchModule('遮光板开关', response.sunshadeStatus));
            modules.push(createSwitchModule('警报开关', response.alarmStatus));
            modules.push(createSwitchModule('加湿器开关', response.humidifierStatus));
            modules.forEach(module => fragment.appendChild(module));
            container.appendChild(fragment);
        }

        function bindEventListeners() {
            var switchInputs = document.querySelectorAll('.switch input');
            switchInputs.forEach(input => {
                input.addEventListener('change', function () 
                {
                    var status = this.checked ? '开启' : '关闭';
                    var label = this.parentNode.querySelector('span:last-child');
                    label.textContent = '状态：' + status;

                    // var xhr = new XMLHttpRequest();//创建对象
                    // var url = "";
                    // var response;
                    // //配置
                    // xhr.open("post", url, true); //post请求方法,
                    // //true:异步请求
                    // var parentModule = this.closest('.module-container');
                    // if (parentModule) {
                    //     var moduleTitle = parentModule.querySelector('h2').textContent;
                    //     console.log('产生 change 事件的元素所在的模块标题是：' + moduleTitle);
                        
                    //     if (moduleTitle == "空调控制") {
                    //         xhr.send("key=305&val=" + status);
                    //         response = {
                    //             acStatus: status
                    //         };
                    //     }
                    //     else if (moduleTitle == "遮光板开关") {
                    //         xhr.send("key=203&val=" + status);
                    //         response = {
                    //             sunshadeStatus: status
                    //         };
                    //     }
                    //     else if (moduleTitle == "警报开关") {
                    //         xhr.send("key=206&val=" + status);
                    //         response = {
                    //             alarmStatus: status
                    //         };
                    //     }
                    //     else if (moduleTitle == "加湿器开关") {
                    //         xhr.send("key=204&val=" + status);
                    //         response = {
                    //             humidifierStatus: status
                    //         };

                    //     }
                    // } else {
                    //     console.log('未找到父模块');
                    // }
                    // updateData(response);
                });
            });

            document.getElementById('home').addEventListener('click', function () {
                document.getElementById('contentArea').innerHTML = `
                     <div class="content" id="contentArea">
        <div class="content-intro">
            <h1>欢迎来到首页</h1>
            <p>这是基于边缘计算的智行车载操控矩阵的首页。</p>
        </div>
        <div class="module-container">
            <!-- 新增的模块 -->
            <div class="module">
                <h2>车内温度</h2>
                <p>当前车内温度：25°C</p>
            </div>
            <div class="module">
                <h2>车内湿度</h2>
                <p>当前车内湿度：50%</p>
            </div>
            <div class="module">
                <h2>空调控制</h2>
                <p>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round"></span>
                    </label>
                    空调状态：开启<br>
                    当前空调温度：°C
                </p>
            </div>
            <div class="module">
                <h2>车外温度</h2>
                <p>当前车外温度：°C</p>
            </div>
            <div class="module">
                <h2>车外湿度</h2>
                <p>当前车外湿度：</p>
            </div>
            <div class="module">
                <h2>光照强度</h2>
                <p>光照强度： lux</p>
            </div>
            <div class="module">
                <h2>电池电压</h2>
                <p>电池电压：V</p>
            </div>
            <div class="module">
                <h2>水箱水量</h2>
                <p>水箱水量：%</p>
            </div>
            <div class="module">
                <h2>发动机温度</h2>
                <p>发动机温度：°C</p>
        </div>
        <div class="module">
            <h2>遮光板开关</h2>
            <p>
                <label class="switch">
                    <input type="checkbox" checked>
                    <span class="slider round"></span>
                </label>
                遮光板状态：开启
            </p>
        </div>
        <div class="module">
            <h2>警报开关</h2>
            <p>
                <label class="switch">
                    <input type="checkbox" checked>
                    <span class="slider round"></span>
                </label>
                警报状态：关闭
            </p>
        </div>
        <div class="module">
            <h2>加湿器开关</h2>
            <p>
                <label class="switch">
                    <input type="checkbox" checked>
                    <span class="slider round"></span>
                </label>
                加湿器状态：关闭
            </p>
        </div>
    </div>
    </div>
                `;
                // var response = {
                //     insideTemperature: 25,
                //     insideHumidity: 50,
                //     acStatus: '开启',
                //     acTemperature: 22,
                //     outsideTemperature: 28,
                //     outsideHumidity: 40,
                //     lightIntensity: 800,
                //     batteryVoltage: 12.5,
                //     waterTankLevel: 50,
                //     engineTemperature: 90,
                //     sunshadeStatus: '开启',
                //     alarmStatus: '关闭',
                //     humidifierStatus: '关闭'
                // };
                // updateData(response);
            });

            document.getElementById('stm32').addEventListener('click', function () {
                document.getElementById('contentArea').innerHTML = `
                    <h1>STM32数据</h1>
                    <p>这里展示STM32相关的数据。</p>
                `;
            });

            document.getElementById('modbus').addEventListener('click', function () {
                document.getElementById('contentArea').innerHTML = `
                    <h1>MODBUS数据</h1>
                    <p>这里展示MODBUS相关的数据。</p>
                `;
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            bindEventListeners();
        });
    </script>
</body>

</html>